@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './ripple';
@import './mixin';

@btn-prefix-cls: ~'@{c7n-prefix}-btn';
@progress-cls: ~'@{c7n-prefix}-progress';

// for compatibile
@btn-ghost-color: @text-color;
@btn-ghost-bg: transparent;
@btn-ghost-border: @border-color-base;

// Button styles
// -----------------------------
.@{btn-prefix-cls} {
  line-height: @btn-height-base;
  .btn;
  .btn-default;
  // Make sure that the target of Button's click event always be `button`

  > i.@{iconfont-css-prefix} {
    display: inline-block;
    line-height: inherit;
    vertical-align: top;
    pointer-events: none;
  }
  > span {
    display: inline-block;
  }
  > i.@{iconfont-css-prefix} + span,
  > span + i.@{iconfont-css-prefix} {
    margin-left: 0.04rem;
  }
  > div.btn-loading {
    display: inline-block;
    width: 0.32rem;
    margin-right: 0.04rem;

    > span {
      display: inline-block;
      width: 0.07rem;
      height: 0.07rem;
      background: #000;
      border-color: #000;
      border-radius: 50%;
    }
    .dot1 {
      transform: scale(1);
      opacity: 1;
      animation: btn-loading 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.07s infinite normal;
    }
    .dot2 {
      margin: 0 0.03rem;
      transform: scale(0.7);
      opacity: 0.9;
      animation: btn-loading 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.17s infinite normal;
    }
    .dot3 {
      transform: scale(0.7);
      opacity: 0.9;
      animation: btn-loading 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.27s infinite normal;
    }
  }
  .@{progress-cls}.@{progress-cls}-loading {
    margin-right: 0.01rem;
    line-height: 1;

    & + span {
      margin-left: 0.05rem;
    }

    .@{progress-cls}-inner {
      width: 0.15rem;
      height: 0.15rem;
    }
  }
  &-flat&-primary {
    .btn-flat-primary;

    .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
      border-right-color: @btn-group-border;
      border-left-color: @btn-group-border;

      &:disabled {
        border-color: @btn-default-border;
      }
    }

    .@{btn-prefix-cls}-group &:first-child {
      &:not(:last-child) {
        border-right-color: @btn-group-border;
        &[disabled] {
          border-right-color: @btn-default-border;
        }
      }
    }

    .@{btn-prefix-cls}-group &:last-child:not(:first-child),
    .@{btn-prefix-cls}-group & + & {
      border-left-color: @btn-group-border;
      &[disabled] {
        border-left-color: @btn-default-border;
      }
    }
  }

  &-raised&-primary {
    .btn-raised-primary;

    .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
      border-right-color: @btn-group-border;
      border-left-color: @btn-group-border;

      &:disabled {
        border-color: @btn-default-border;
      }
    }

    .@{btn-prefix-cls}-group &:first-child {
      &:not(:last-child) {
        border-right-color: @btn-group-border;
        &[disabled] {
          border-right-color: @btn-default-border;
        }
      }
    }

    .@{btn-prefix-cls}-group &:last-child:not(:first-child),
    .@{btn-prefix-cls}-group & + & {
      border-left-color: @btn-group-border;
      &[disabled] {
        border-left-color: @btn-default-border;
      }
    }
  }
  &-ghost {
    .btn-ghost;
  }

  &-dashed {
    .btn-dashed;
    line-height: @btn-height-base - 0.04rem;
  }

  &-danger {
    .btn-danger;
  }

  &-circle,
  &-circle-outline {
    .btn-circle(@btn-prefix-cls);
    & > i.@{iconfont-css-prefix} {
      margin: 0;
    }
  }

  &::before {
    position: absolute;
    top: -0.01rem;
    right: -0.01rem;
    bottom: -0.01rem;
    left: -0.01rem;
    z-index: 1;
    display: none;
    background: #fff;
    border-radius: inherit;
    opacity: 0.35;
    transition: opacity 0.2s;
    content: '';
    pointer-events: none;
  }

  .@{iconfont-css-prefix} {
    transition: margin-left 0.3s @ease-in-out;
  }

  &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
    pointer-events: none;
  }

  &-group {
    .btn-group(@btn-prefix-cls);
  }

  &:not(&-circle):not(&-circle-outline)&-icon-only {
    padding-right: 0.08rem;
    padding-left: 0.08rem;
  }

  // http://stackoverflow.com/a/21281554/3040605
  &:focus > span,
  &:active > span {
    position: relative;
  }

  &-clicked::after {
    position: absolute;
    top: -0.01rem;
    right: -0.01rem;
    bottom: -0.01rem;
    left: -0.01rem;
    display: block;
    border: 0 solid @primary-color;
    border-radius: inherit;
    opacity: 0.4;
    content: '';
  }

  &-danger&-clicked::after {
    border-color: @btn-danger-color;
  }

  &-background-ghost {
    color: #fff;
    background: transparent !important;
    border-color: #fff;
  }

  &-background-ghost&-primary {
    .button-variant-ghost(@btn-primary-bg);
  }

  &-background-ghost&-danger {
    .button-variant-ghost(@btn-danger-color);
  }

  &-two-chinese-chars::first-letter {
    letter-spacing: 0.34em;
  }

  &-two-chinese-chars > * {
    margin-right: -0.34em;
    letter-spacing: 0.34em;
  }

  &-raised {
    box-shadow: @btn-box-shadow;
    transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
      box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;

    &:not([disabled]):active {
      box-shadow: @btn-active-box-shadow;
    }
  }

  &-flat&-loading {
    background: rgba(0, 0, 0, 0.04);
    box-shadow: @btn-active-box-shadow;
  }

  &-raised&-loading {
    box-shadow: @btn-active-box-shadow;
  }

  &-flat {
    &:hover {
      background: @btn-hover-default-color;
    }
  }
}

@keyframes buttonEffect {
  to {
    top: -0.06rem;
    right: -0.06rem;
    bottom: -0.06rem;
    left: -0.06rem;
    border-width: 0.06rem;
    opacity: 0;
  }
}

a.@{btn-prefix-cls} {
  line-height: @btn-height-base - 0.02rem;
  &-lg {
    line-height: @btn-height-lg - 0.02rem;
  }
  &-sm {
    line-height: @btn-height-sm - 0.02rem;
  }
}

@keyframes btn-loading {
  0% {
    transform: scale(0.7);
    opacity: 0.9;
  }
  33.3% {
    transform: scale(1);
    opacity: 1;
  }
  66.6% {
    transform: scale(0.7);
    opacity: 0.9;
  }
  100% {
    transform: scale(0.7);
    opacity: 0.9;
  }
}
